<template>
	<view>
		
		<!-- 头像 -->
		<view class="avatar">
			<image src="https://fenglyj.oss-cn-beijing.aliyuncs.com/cf/upload/20250219/PixPin_2025-02-20_17-34-16.png" mode=""></image>
		</view>
		<!-- 用户名 手机号 -->
		<view class="name">
			<text>张先生  {{cfuser.phone}}</text>
		</view>
		<view class="container">
			<!-- 我的优惠券 -->
			<view class="myCoupon">
				<image src="/static/my/彩色-优惠券@2x.png" mode=""></image>
				<text>我的优惠券</text>
				<view class="couponNumber">
					<text>3张</text>
					<image src="/static/my/收起箭头小.png" mode=""></image>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="myOrders">
				<view class="title">
					我的订单
				</view>
				<!-- 全部订单 -->
				<navigator url="/packagesOrder/myOrder/myOrder?id=0" class="allOrders">
					<text>全部订单</text>
					<image src="/static/my/收起箭头小.png" mode=""></image>
				</navigator>
				<!-- 待支付 待使用 待评价 -->
				<view class="wait">
					<view class=""><navigator url="/packagesOrder/myOrder/myOrder?id=1">待支付</navigator></view>
					<view class=""><navigator url="/packagesOrder/myOrder/myOrder?id=2">待使用</navigator></view>
					<view class=""><navigator url="/packagesOrder/myOrder/myOrder?id=3">待评价</navigator></view>
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="myService">
				<view class="title">
					我的服务
				</view>
				<view class="myServiceList">
					<view class="item">
						<image src="/static/my/组 9(3).png" mode=""></image>
						<view class="">领券中心</view>
					</view>
					<view class="item">
						<image src="/static/my/组 9(4).png" mode=""></image>
						<view class="">邀请好友</view>
					</view>
					<view class="item">
						<image src="/static/my/组 9(5).png" mode=""></image>
						<view class="">我的车辆</view>
					</view>
					<navigator url='/packagesUpkeep/Consumptionrecords/Consumptionrecords' class="item">
						<image src="/static/my/组 9(6).png" mode=""></image>
						<view class="">消费记录</view>
					</navigator>
					<navigator url="/packagesMy/order/order" class="item">
						<image src="/static/my/组 9(7).png" mode=""></image>
						<view class="">我的维修</view>
					</navigator>
					<view class="item">
						<image src="/static/my/组 9(8).png" mode=""></image>
						<view class="">意见反馈</view>
					</view>
					<navigator url="/packagesUpkeep/Consume/Consume" class="item">
						<image src="/static/my/组 9(9).png" mode=""></image>
						<view class="">消息中心</view>
					</navigator>
				</view>
			</view>
		</view>
		
		<!-- <view>我的</view>
		<navigator url="/packagesMy/order/order">我的订单</navigator>
		<navigator url="/packagesMy/maintenanceRecord/maintenanceRecord">维修记录</navigator>
		<navigator url="/packagesMy/appointment/appointment">立即预约</navigator>
		 --><MagicNavigationBar :items="items" :digHolePosition="1" :selectedColor="selectedColor" :color="color"
			@onTabSelect="onTabSelect" :current="currentTab" :background-color="backgroundColor" :screenBackgroundColor="screenBackgroundColor" :indicatorPadding="indicatorPadding" :indicatorSize="indicatorSize" :indicatorBackground="indicatorBackground">
			<!-- 圆形指示器的内容有插槽实现�-->
			<template v-slot:indicatorContent>
				<view style="display: flex;justify-content: center;width: 100%;height: 100%;">
					<!-- <view style="align-self:center;">上传</view> -->
					<image @click="toRescue" :src="img" style="width: 30px;height: 30px;align-self:center;"></image>
				</view>
			</template>
		</MagicNavigationBar>
	</view>
</template>

<script>
	import { onMounted } from "vue";
import MagicNavigationBar from "@/uni_modules/jorbin-DigHoleNavigationBar/components/jorbin-DigHoleNavigationBar/jorbin-DigHoleNavigationBar.vue"
	export default {
		components:{
			MagicNavigationBar
		},
		methods:{
			toRescue(){
				uni.redirectTo({
					url:"/packagesRescue/rescue/rescue",
				})
			},
			onTabSelect(index,item){
				console.log(item.url);
				uni.redirectTo({
					url:item.url
				})
			}
		},
		data() {
			return {
				cfuser: '',
				img: require("@/static/warning.png"),
				selectedColor: '#2979ff',
				color:'#666666',
				currentTab: 2,
				backgroundColor:'#ffffff',
				screenBackgroundColor:'#f5f5f5',
				indicatorPadding:8,
				indicatorSize:75,
				indicatorBackground:'#ff8033',
				//导航元素数据
				items: [{
						//未��中图标
						icon: {
							src: require("@/static/index_line.png"),
							width: 30,
							height: 30
						},
					
						//文字
						text: '首页',
						//选中的图��
						selectedIcon: {
							src: require("@/static/index.png")
						},
						url:'/pages/index/index'

					},
					{
						type: 'indicator',
						text: '上传'
					},
					{
						icon: {
							src: require("@/static/my_line.png"),
							width: 30,
							height: 30
						},
						text: '我的',
						selectedIcon: {
							src: require("@/static/my.png")
						}

					}]
				}
			},
		onLoad() {
			// 获取当前登录的cfuser
			this.cfuser = uni.getStorageSync('cfuser')
		}
	}
		
		
		
</script>

<style scoped>
	.avatar {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
	.avatar>image {
		border: 6rpx solid rgb(255, 255, 255, 0.3);
		width: 150rpx;
		height: 150rpx;
		border-radius: 200rpx;
	}
	
	.name {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	
	.container {
		padding: 30rpx;
		height: 1300rpx;
	}
	
	.myCoupon {
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		margin-bottom: 30rpx;
	}
	
	.myCoupon>image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 30rpx;
	}
	
	.couponNumber {
		position: absolute;
		right: 50rpx;
	}
	
	.couponNumber image {
		margin-left: 20rpx;
		width: 25rpx;
		height: 25rpx;
	}
	
	.myOrders {
		background-color: #FFFFFF;
		padding: 30rpx;
		position: relative;
		border-radius: 20rpx;
	}
	
	.title {
		font-size: 40rpx;
		border-bottom: 4rpx solid rgba(199, 201, 206, 0.5);
		padding-bottom: 30rpx;
	}
	
	.allOrders {
		position: absolute;
		right: 30rpx;
		top: 35rpx;
		opacity: 0.6;
	}
	
	.allOrders>image{
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
	}
	
	.wait {
		display: flex;
		justify-content: space-between;
	}
	
	.wait>view {
		margin-top: 30rpx;
		height: 100rpx;
		width: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		color: #FFFFFF;
	}
	
	.wait>view:nth-child(1) {
		background-image: url('/static/my/组 9(0).png');
	}
	
	.wait>view:nth-child(2) {
		background-image: url('/static/my/组 9(1).png');
	}
	
	.wait>view:nth-child(3) {
		background-image: url('/static/my/组 9(2).png');
	}
	
	.myService {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx;
	}
	
	.myServiceList {
		display: flex;
		flex-wrap: wrap;
		font-size: 16rpx;
		padding: 30rpx;
	}
	
	.item {
		width: 140rpx;
		height: 130rpx;
		text-align: center;
		margin-top: 30rpx;
	}
	
	.myServiceList image {
		height: 60rpx;
		width: 70rpx;
	}
</style>